<template>
  <div>
    <el-row>
      <div>
        <el-col :span="3"> <p>付款方名称</p></el-col>
        <el-col :span="5">
          <el-input
            v-model="search.name"
            placeholder="请输入查询关键字"
          ></el-input>
        </el-col>
        <el-col :span="4"> <p>应付金额大于等于</p></el-col>
        <el-col :span="5">
          <el-input
            v-model="search.payable"
            placeholder="请输入金额"
          ></el-input>
        </el-col>
        <el-col :span="1">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="select()"
          ></el-button>
        </el-col>
      </div>
      <el-col :span="5">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="changeButtonText"
          >{{ buttonText }}</el-button
        >
      </el-col>
      <el-table
        ref="multipleTable"
        :data="receive"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="120" align="center">
          <!-- 如果想要在el-table-column的子标签获取到属性值，必须通过插槽方式获取 
                            scope里面封装carts数组对象   row代表当前行的元素（数组中的某个元素）
                           -->
        </el-table-column>
        <el-table-column
          prop="cname"
          label="客户名称"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sendid" label="单号" align="center">
        </el-table-column>
        <el-table-column
          prop="receivable"
          label="应收款金额"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="rectime" label="时间" width="150" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">未付款</span>
            <span v-else>未付款</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="getTableData(scope.row.id)">
              查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="prev, pager, next, jumper, total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table
        ref="multipleTable"
        :data="detail"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="120" align="center">
          <!-- 如果想要在el-table-column的子标签获取到属性值，必须通过插槽方式获取 
                            scope里面封装carts数组对象   row代表当前行的元素（数组中的某个元素）
                           -->
        </el-table-column>
        <el-table-column prop="name" label="商品名" width="140" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200" align="center">
        </el-table-column>

        <el-table-column
          prop="stock"
          label="数量"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column  label="小计" width="200" align="center">
            <template slot-scope="scope">
                <span>{{(scope.row.price * scope.row.stock).toFixed(2) }}</span>
              </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      buttonText: "次品",
      page: 1,
      size: 5,
      total: 0,
      totalPage: 0,
      typeFromBackend: 1,
      receive: [],
      detail: [],
      search: {
        page: 1,
        size: 5,
        cname: "",
        receivable: "",
        name: "",
        payable: "",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeButtonText() {
      if (this.buttonText === "成品") {
        this.buttonText = "次品";
        this.getData();
      } else {
        this.buttonText = "成品";
        this.$axios
          .get("/receive/findByReceive/" + this.page + "/" + this.size)
          .then((res) => {
            // res.data   response result
            // res.data.data respage
            // res.data.data.data list
            let resPage = res.data.data;

            this.page = resPage.curPage;
            this.total = resPage.total;
            this.totalPage = resPage.totalPage;
            this.receive = resPage.data;
          });
      }
    },
    handleSizeChange(val) {
      this.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    select() {
      //   this.$axios
      // .get("/pay/findByPay/" + this.page + "/" + this.size)
      // .then((res) => {
      //   // res.data   response result
      //   // res.data.data respage
      //   // res.data.data.data list
      //   let resPage = res.data.data;

      //   this.page = resPage.curPage;
      //   this.total = resPage.total;
      //   this.totalPage = resPage.totalPage;
      //   this.receive = resPage.data;
      // });
      this.$axios.post("/receive/findByCondition", this.search).then((res) => {
        this.receive = res.data.data.data;
        this.search.page = res.data.data.curPage;
        this.total = res.data.data.total;
      });
    },
    getData() {
      this.$axios
        .get("/receive/findByRefund/" + this.page + "/" + this.size)
        .then((res) => {
          // res.data   response result
          // res.data.data respage
          // res.data.data.data list
          let resPage = res.data.data;

          this.page = resPage.curPage;
          this.total = resPage.total;
          this.totalPage = resPage.totalPage;
          this.receive = resPage.data;
        });
    },
    handleClose() {
      this.$axios.get().then((res) => {});
    },
    getTableData(id) {
      (this.dialogVisible = true),
        this.$axios.post("/receive/findtable/" + id).then((res) => {
          this.detail = res.data.data;
        });
    },
 
  },
};
</script>
<style scoped>
</style>